<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>解锁</title>
	<meta  name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="x5-fullscreen" content="true">
	<meta name="full-screen" content="yes">
	<link rel="stylesheet" href="css/frozen.css">
	<style>
	body{
		background: #252736;
		overflow: hidden;
	}
	</style>
</head>
<body>
	<div style="padding-top: 50px;text-align: center">
		<img src="img/logo.png" style="width: 100px;height: 100px;" alt="">
		<h2 style="text-align: center;color: #fff;margin-bottom: 20px;margin-top: 20px">请绘制手势密码，初始密码默认为“Z”字型</h2>
		<div id="gesturepwd" style="margin-left: 47px;"></div>
	</div>
	
	<script src="js/jquery-2.1.4.min.js"></script>
	<script src="js/jquery.gesture.password.min.js"></script>
	<script src="lib/zepto.min.js"></script>
	<script src="js/frozen.js">$</script>
	<script>
		$("#gesturepwd").GesturePasswd({
			backgroundColor:"#252736",  //背景色
			color:"#FFFFFF",   //主要的控件颜色
			roundRadii:35,    //大圆点的半径
			pointRadii:6, //大圆点被选中时显示的圆心的半径
			space:30,  //大圆点之间的间隙
			width:300,   //整个组件的宽度
			height:300,  //整个组件的高度
			lineColor:"#00aec7",   //用户划出线条的颜色
			zindex :100  //整个组件的css z-index属性
		});

		$("#gesturepwd").on("hasPasswd",function(e,passwd){
			var result;
			if(passwd == "1235789"){
				result=true;
			}
			else {
				result=false;
			}
			if(result == true){
				$("#gesturepwd").trigger("passwdRight");
				setTimeout(function(){
	        		//密码验证正确后的其他操作，打开新的页面等。。。
	        		// alert("密码正确！")
	        		// el.loading("hide");
	        		window.location.href = 'index.html'
      			},500);  //延迟半秒以照顾视觉效果
			}
			else{
				$("#gesturepwd").trigger("passwdWrong");
      			//密码验证错误后的其他操作。。。
			  }
			});
	
		//动态设置控件的长和宽
		$(document).ready(function(){
			//禁止在页面中上下滑动
			document.querySelector('body').addEventListener('touchstart', function (ev) {
			    event.preventDefault();
			});	
			$("body").height( $(window).height() );

			var phone_height = $(window).height(); //浏览器当前窗口可视区域高度
			var phone_width = $(window).width(); //浏览器当前窗口可视区域宽度
			var margin_left = (phone_width - 300)/2;
			var margin_top = (phone_height - 300)/2;
			// alert(margin_top);
			// $("#gesturepwd").css("margin-left":margin_left,"margin-right":margin-left,"margin-top":margin_top);
			// $("#gesturepwd").css("margin-left":margin_left);
		});
	</script>
</body>
</html>